<template>
  <div class="hitokoto">
    <p class="text">{{ data.hitokoto }}</p>
    <p class="from">From: {{ data.from }}</p>
    <p class="type">Type: {{ config.type }}</p>
    <p class="msg">Message: {{ config.msg }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Hitokoto',
  props: ['config', 'data']
}
</script>

<style lang="less">
.hitokoto {
  .text {
    font-size: 30px;
    font-weight: bolder;
  }
  .from {
    color: green;
  }
  .type {
    font-weight: bold;
  }
  .msg {
    color: red;
  }
}
</style>
